<template>
  <!-- 选择专户信息 -->
  <el-dialog
    v-model="visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogSelect.title"
    draggable
    append-to-body
    close-icon="CloseBold"
    @close="closeSelect"
  >
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        :data="tableList"
        highlight-current-row
        border
      >
        <el-table-column
          key="prjName"
          label="项目名称"
          align="center"
          prop="prjName"
          width="120"
        />
        <el-table-column
          key="prjNum"
          label="项目编号"
          align="center"
          prop="prjNum"
          width="120"
        />
        <el-table-column
          key="username"
          label="账户名称"
          align="center"
          prop="username"
          width="120"
        />
        <el-table-column
          key="bankNo"
          label="银行账号"
          width="100"
          align="center"
          prop="bankNo"
        >
        </el-table-column>

        <el-table-column
          key="bankType"
          label="开户银行"
          align="center"
          width="130"
          prop="bankType"
        >
          <template #default="scope">
            {{ bankTypeFilter(scope.row.bankType) }}
          </template>
        </el-table-column>

        <el-table-column
          key="balance"
          label="工资专户余额(万元)"
          width="140"
          align="center"
          prop="balance"
        />
        <el-table-column
          label="操作"
          fixed="right"
          :width="mobile === 'mobile' ? 110 : 220"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="confirmProject(scope.row)"
            >
              <i-ep-grid />
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick, computed } from "vue";
import { MessageParamsWithType, ElForm } from "element-plus";
import { getDicts } from "@/store/modules/dict";
import { useScreen } from "@/store/modules/screen";
import {
  ProjectAccount,
  ParamsType,
} from "@/api/system/projectspecialaccount/types";
import { getProjectAccountList } from "@/api/system/projectspecialaccount/index";
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const props = defineProps({
  dialogSelect: {
    type: Object,
    default: () => ({
      visible: false,
      title: "",
      id: 2,
    }),
  },
});

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 900;
  }
  handleQuery();
}

// eslint-disable-next-line vue/no-setup-props-destructure
const emit = defineEmits(["sendClose", "confirmProject"]);
const tableList = ref<ProjectAccount[]>();
const total = ref(0);
const loading = ref(false);
let visible = ref(props.dialogSelect.visible);
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
  accountStatus: 2,
});

const examinFormRef = ref(ElForm);
const BankTypeTypes = getDicts("bankTypeTypes"); //银行类别

onMounted(async () => {
  initScreen();
});

function confirmProject(data: ProjectAccount) {
  emit("confirmProject", data);
  closeSelect();
}

/* 发送当前弹窗关闭 */
function closeSelect() {
  visible.value = false;
  emit("sendClose", "select", true);
}

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  let list = await getProjectAccountList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data.list;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

/**银行名称 */
function bankTypeFilter(val: string) {
  let temp = BankTypeTypes.filter(
    (item: { value: string }) => item.value === val
  );
  if (temp && temp[0]) {
    return temp[0].label;
  } else {
    return "";
  }
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
